<script setup lang="ts">
import { inject } from 'vue'
import { spMessageKey } from '@/constant/key'
type MessageType = 'success' | 'info' | 'warn' | 'error'

const spMessage = inject(spMessageKey)
function onShowMsg(type: MessageType) {
  spMessage![type](`This is a ${type} message`)
}
</script>

<template>
  <div class="wrapper">
    <button @click="onShowMsg('info')">普通消息</button>
    <button @click="onShowMsg('success')">成功消息</button>
    <button @click="onShowMsg('warn')">警告消息</button>
    <button @click="onShowMsg('error')">错误消息</button>
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wrapper button {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
}
</style>
